<template>
  <div id="app" ref="Muisc">
    <DownLoad v-if="!$route.meta.hideHead"></DownLoad>
    <TopNav v-if="!$route.meta.hideHead"></TopNav>
    <router-view @play='playMusic' @pause="pause"></router-view>
    <Play :playmusice ='playmusice' :musicList='musicList'  
    @play='changeMusic' @delete='deleteM' @emptys='emptys' v-if="playmusice"></Play> 
  </div>
</template>
<script>
import TopNav from './components/topNav'
import DownLoad from './components/download'
import Play from './components/Play'
export default {
  data(){
    return{
      musicId:null,
      playmusice:null,
      musicList:[],
      // commentList:[],
    }
  },
  watch:{
    playmusice(value){
      if(value == null){
        this.$refs.Muisc.style.paddingBottom='0px'
      }else{
        this.$refs.Muisc.style.paddingBottom='60px'
      }
    }
  },
  methods:{
    pause(){
      this.playmusice = null;
    },
    changeMusic(e){
      this.playmusice = e
    },
    pauseMUisc(e){
     console.log('e=====>',e);
    },
    // 删除某条信息
    deleteM(e){
      this.musicList.map((d,index)=>{
        if(d.id==e){
          this.musicList.splice(index,1)
          if(this.musicList.length == 0){
            this.playmusice = null;
          }
        }
      })
    },
    // 清空播放列表
    emptys(){
      this.playmusice = null;
    },
    playMusic(res){
      // 处理播放状态
      if(!res.picUrl){
          if(res.al&&res.al.picUrl){
            res.picUrl = res.al.picUrl
          }else {
            res.picUrl='https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg'
          }
      }
      if(res.song&&res.song.artists){
         res.artists = res.song.artists;
      }
      this.playmusice = res;
      let exit = false;
      for(let i=0 ;i<this.musicList.length;i++){
        if(this.musicList[i].id==res.id){
          exit = true;
          break;
        }
      }
      if(!exit){
        this.musicList.push(res)
      }
    }

  },
  components:{
    TopNav,
    DownLoad,
    Play,
  }
}
</script>
<style>
#app{
  padding-top: 124px;
  /* padding-bottom: 40px; */
}
</style>
